<template>
	<div class="t_all_box"  >
		<el-page-header @back="backgo" content="修改权限"></el-page-header>
		<div style="border-bottom: 1px solid #D7D7D7 ;margin-top: 30px;">
			<div class="t_type_title">
				<div style="width: 250px;">一级分类</div>
				<div style="width: 300px;">二级分类</div>
				<div>三级分类</div>
			</div>
			<div v-for="item in lists2" :name="item.id"  :key="item.id" v-if="item.id == 106?false:true"  class="t_one_ji" >
			<div class="t_one_ji_item" ><input type="checkbox"  :value="item.id" v-model="checkList" @change="fixpost(item.id, $event.target.checked)"/>{{item.name}}</div>
			<div style="border-left: 1px solid #D7D7D7;width: calc(100% - 250px);">
				
					<div v-if="item.data.length!=0" v-for="item2 in item.data"   :key="item2.id" class="t_twoandthree" style="display: flex;">
						<div class="t_two_ji"><input type="checkbox"  :value="item2.id" v-model="checkList" @change="fixpost(item2.id, $event.target.checked)"/>{{item2.name}}</div>
						<div class="t_three_ji" >
								<div class="t_three_ji_item" v-for="item3 in item2.data"  :key="item3.id">
									<input type="checkbox" :value="item3.id" v-model="checkList" @change="fixpost(item3.id, $event.target.checked)"/>{{item3.name}}
								</div>
							
						</div>
					</div>
					<div v-if="item.data.length==0" class="t_twoandthree" style="height: 100%;">
						<div class="t_two_ji" style="height: 100%;border-right:1px solid #D7D7D7;"></div>
					</div>
			</div>
		</div>
		</div>
		
		<div style="margin-top: 30px;margin-bottom: 50px;display: flex;justify-content: center;">
			<el-button type="info" round @click="backgo">取 消</el-button>
			<el-button type="danger" round @click="fixpersongo">保存</el-button>
		</div>

	</div>

</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'
	export default{
		components: {
			"left": left,
			"top": top,
			"foot": foot
		},
		name : "quanxianguanli",
		data(){
			return {
				lists2:{},
				checkList:[],
			}
		},
		created() {
			
		},
		mounted(){
			this.getlists2()
			this.fixnew()
		},
		methods: {
			//获取功能列表
			getlists2:function(){
				axios.get('/api/functions/lists?new=1')
					.then(response => {
						this.lists2 = response.data.data

            this.lists2.forEach((item,index)=>{
              if(item.name == '产品销售中心'){
                this.lists2.splice(index,1)
              }
            })

			console.log('权限列表')
			console.log(this.lists2)
			
					})
			},
			//绑定权限
			fixpost:function(id, status){
				console.log(id, status)
				if (status) {
					this.checkList = [...new Set([...this.checkList, id, ...this.getParentIds(id)])];
				} 
				// 当取消时处理下级
				else {
					const childrenIds = this.getAllChildIds(id);
					this.checkList = this.checkList.filter(item => 
						item !== id && !childrenIds.includes(item)
					);
				}
			},
			getParentIds(childId) {
				const findParent = (items, targetId, parentIds = []) => {
					for (const item of items) {
						if (item.id === targetId) return parentIds;
						if (item.data) {
							const found = findParent(item.data, targetId, [...parentIds, item.id]);
							if (found.length) return found; // 关键修改：确保找到有效路径时才返回
						}
					}
					return [];
				};
				return findParent(this.lists2, childId);
			},
			
			// 新增方法：获取所有子级ID
			getAllChildIds(parentId) {
				const findChildren = (items) => {
					return items.reduce((acc, item) => {
						acc.push(item.id);
						if (item.data) acc.push(...findChildren(item.data));
						return acc;
					}, []);
				};
				
				const findTarget = (items) => {
					for (const item of items) {
						if (item.id === parentId) return findChildren(item.data || []);
						if (item.data) {
							const result = findTarget(item.data);
							if (result.length) return result;
						}
					}
					return [];
				};
				
				return findTarget(this.lists2);
			},









			fixnew:function(){
				

				axios.get('/api/functions/permission/list?id='+this.$route.query.id)
					.then(response => {
						if(response.data.msg.code == 0){

							this.checkList = ""
							var arr = []
							for( var i in response.data.data){
								arr.push(response.data.data[i].func_id)
							}
							this.checkList = arr
							
							console.log('this.checkList')
							console.log(this.checkList)
              // this.dkeys = []
              // response.data.data.forEach(item=>{
              //   this.dkeys.push(item.func_id)
              // })

						}else{
							this.$message.error(response.data.msg.info);
						}
					})
			},
			//修改账户信息
			fixpersongo:function(){

				// const checkedNodes = this.$refs.tree.getCheckedNodes();
				// let arr = []
				// checkedNodes.forEach(item=>{
				//   arr.push(item.id)
				// })

						axios.post('/api/permission/func', {permission_id:this.$route.query.id,func_ids:this.checkList})
						.then(response => {
								if(response.data.msg.code == 0){
									this.checkList = ""

									this.$message({
										type: 'success',
										message: '修改成功!'
									});
									this.backgo()
								}else{
									this.$message.error(response.data.msg.info);
								}
						})
			},
			//返回
			backgo(){
				this.$router.push({path:'/zhanghuguanli/gangweiguanli'})
			}
		}
	}
</script>

<style scoped>
.t_all_box{
	background-color: white;
	padding: 30px;
}
.t_one_ji{
	border: 1px solid #D7D7D7;
	border-bottom:none;
	display: flex;
}

.t_two_ji{
	width: 300px;
	display: flex;
	justify-content: start;
	align-items: center;
	background-color: #F2F8FF;
	color: #434343;
	box-sizing: border-box;
	padding-left: 30px;
}
.t_twoandthree{
	border-bottom:1px solid #D7D7D7;
}

.t_twoandthree:last-child{
	border-bottom: none;
}
.t_three_ji{
	border-left:1px solid #D7D7D7;
	width: calc(100% - 300px);
	min-height: 80px;
	display: flex;
	flex-wrap: wrap;
}
.t_three_ji_item{
	margin: 20px;
	display: flex;
	align-items: center;
	color: #434343;
}
.t_checkinput{
	margin-top: 0 ;
}
.t_one_ji_item{
	width: 250px;
	display:flex;
	align-items: center;
	justify-content: start;
	min-height: 80px;
	background-color: #F2F8FF;
	color: #434343;
	box-sizing: border-box;
	padding-left: 30px;
}
.t_type_title{
	display: flex;
	border: 1px solid #D7D7D7;
	background-color: #F6F6F6;
	border-bottom: none;
}
.t_type_title div{
	padding: 5px 10px;
	box-sizing: border-box;
	color: #434343;
}



/* 隐藏原生复选框 */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
}

/* 选中时的背景颜色 */
input[type="checkbox"]:checked {
  background: #2678FF; /* 蓝色背景 */
  border-color: #2678FF;
}

/* 自定义勾选标记 */
input[type="checkbox"]:checked::after {
	content: "";
  display: block;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(1.2);
  margin-left: 4px;
}
</style>
